<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花哨的网页设计</title>
    <style>
        /* 在这里添加CSS样式 */
		/* 动态效果和动画使用CSS来设计 */
		body {
		    font-family: 'Arial', sans-serif;
		}
		
		header nav ul {
		    list-style-type: none;
		    display: flex;
		    justify-content: space-around;
		}
		
		.nav-btn {
		    display: block;
		    padding: 10px;
		    transition: transform 0.3s ease;
		}
		
		.nav-btn:hover {
		    transform: rotateY(360deg);
		}
		
		.intro .dynamic-text {
		    /* 使用keyframes创建打字动画 */
		    animation: typing 2s steps(40, end), blink-caret .75s step-end infinite alternate;
		    white-space: nowrap;
		    overflow: hidden;
		    border-right: 3px solid;
		}
		
		@keyframes typing {
		    from { width: 0 }
		    to { width: 100% }
		}
		
		@keyframes blink-caret {
		    50% { border-color: transparent }
		}
		
		.content-card {
		    transform: translateY(200px);
		    opacity: 0;
		    transition: all 1s ease-out;
		}
		
		.content-card.visible {
		    transform: translateY(0);
		    opacity: 1;
		}
		
		.image-placeholder {
		    width: 100px;
		    height: 100px;
		    margin: 10px;
		    transition: all 0.3s ease;
		}
		
		.image-placeholder:hover {
		    transform: scale(1.1);
		}
		
		footer {
		    text-align: center;
		}
		
		footer p:hover {
		    animation: waving 0.5s ease infinite;
		}
		
		@keyframes waving {
		    0%, 100% { transform: translateX(0); }
		    50% { transform: translateX(10px); }
		}
		
		/* 响应式调整 */
		@media screen and (max-width: 768px) {
		    header nav ul {
		        flex-direction: column;
		    }
		}
    </style>
</head>
<body>

<header>
    <nav>
        <ul>
            <li><a href="#" class="nav-btn">首页</a></li>
            <li><a href="#" class="nav-btn">关于我们</a></li>
            <li><a href="#" class="nav-btn">服务</a></li>
            <li><a href="#" class="nav-btn">联系方式</a></li>
        </ul>
    </nav>
</header>

<main>
    <section class="intro">
        <h1 class="dynamic-text">创意满分的标题效果</h1>
        <p class="content-card">这里是内容，一条非常有深度和启发性的文字描述。这里的文字会动态呈现，吸引你的注意。</p>
    </section>

    <section class="image-display">
        <div class="image-placeholder" style="background-color:#a29bfe;"></div>
        <div class="image-placeholder" style="background-color:#00b894;"></div>
        <div class="image-placeholder" style="background-color:#fdcb6e;"></div>
    </section>
</main>

<footer>
    <p>这是底部信息，它将会随着鼠标移动而产生波动效果，增加页面的动感。</p>
    <div class="social-media-icons">社交媒体图标</div>
</footer>

<script>
	// 滚动时显示动画效果
	window.addEventListener('scroll', () => {
	    let contentCards = document.querySelectorAll('.content-card');
	    contentCards.forEach(card => {
	        let cardPosition = card.getBoundingClientRect().top;
	        let screenPosition = window.innerHeight;
	        if(cardPosition < screenPosition) {
	            card.classList.add('visible');
	        }
	    });
	});
</script>

</body>
</html>